<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link href="view/bootstrap/css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="view/jquery/jquery-1.9.1.js"></script>
<script type="text/javascript" src="view/bootstrap/js/bootstrap.js"></script>
</head>

<body>
		<div class="form-group">
			<label for="firstname" class="col-sm-2 control-label">用户名</label>
			<div class="col-sm-10">
				<input type="text" class="form-control" id="username"
					name="username">
			</div>
		</div>
		<div class="form-group">
			<label for="firstname" class="col-sm-2 control-label">昵称</label>
			<div class="col-sm-10">
				<input type="text" class="form-control" id="nickname"
					name="nickname">
			</div>
		</div>
		<div class="form-group">
			<label for="lastname" class="col-sm-2 control-label">密码</label>
			<div class="col-sm-10">
				<input type="password" class="form-control" name="password" id="password">
			</div>
		</div>
		<div class="form-group">
			<label for="lastname" class="col-sm-2 control-label">邮箱</label>
			<div class="col-sm-10">
				<input type="text" class="form-control"  name="email" id="email">
			</div>
		</div>
		<div class="form-group">
			<label for="lastname" class="col-sm-2 control-label">手机号码</label>
			<div class="col-sm-10">
				<input type="text" class="form-control" id="mobile" name="mobile">
			</div>
		</div>
		<div class="form-group">
			<label for="lastname" class="col-sm-2 control-label">验证码</label>
			<div class="col-sm-10">
				<input type="text" class="form-control" name="securityCode" id="security"> <img
					src="Security/SecurityCodeImageAction" id="Verify"
					style="cursor:hand;" alt="看不清，换一张" />
			</div>

		</div>
		<div class="form-group">
			<div class="col-sm-offset-2 col-sm-10">
				已有账户<a href="${pageContext.request.contextPath}/index.jsp" title=""
					style="color: #03B38B;">登录</a>
			</div>
		</div>


		<div class="form-group">
			<div class="col-sm-offset-2 col-sm-10">
				<button id="register" type="submit" class="btn btn-default submit">注册</button>
			</div>
		</div>
</body>
<script type="text/javascript">
	$(document).ready(
			function() {
				$("#register").click(function() {
					var username = $("#username").val();
					var password = $("#password").val().trim();
					var mobile = $("#mobile").val();
					var email = $("#email").val();
					var nickname = $("#nickname").val();
					var securityCode=$("#security").val().trim();
					if (validateForm()) {
						var params=$("input").serialize();
						$.ajax({
							type : "post",
							data : params,
							url : "register.action",
							success : function(data) {
								var jsonObject = eval("(" + data + ")");
								alert(jsonObject["success"]);
							},
							error : function() {
								alert("请求错误");
							}
						});
					} 
				});
				$("#Verify").click(
						function() {
							$(this).attr(
									"src",
									"Security/SecurityCodeImageAction?timestamp="
											+ new Date().getTime());
						});
			});
	function validateForm() {
		var username = $("#username").val();
		var password = $("#password").val();
		var mobile = $("#mobile").val();
		var email = $("#email").val();
		var uName_reg_len = /.{4,16}/;
		var uName_reg_comp = /[^0-9a-zA-Z_]/;
		var pwd_reg = /.{6,30}/;
		var email_reg = /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/;
		var phone_reg = /^(13[0-9]{9})|(15[0-9]{9})|(17[0-9]{9}|(18[0-9]{9}))$/;
		if (username == "") {
			alert("请填写用户名");
			return false;
		}
		if (!uName_reg_len.test(username)) {
			alert("用户名长度在4到16个字符");
			return false;
		}
		if (uName_reg_comp.test(username)) {
			alert("用户名只允许字母和数字和下划线");
			return false;
		}
		if (!pwd_reg.test(password)) {
			alert("密码的长度必须在6~30个字符之间");
			return false;
		}
		if (!email_reg.test(email)) {
			alert("请填写正确的邮箱格式");
			return false;
		}
		if (!phone_reg.test(mobile)) {
			alert("请填写正确的手机号码");
			return false;
		}
		return true;
	}
</script>
</html>
